<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<body class="hold-transition skin-blue sidebar-mini">
<section class="content-header">
    <h1>项目采购计划看板</h1>
</section>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <form id="queryForm">
                        <div class="row">
                            <div class="form-inline">
                                <div class="form-group">
                                    <label>项目编号</label>
                                    <input type="text" name="code" class="form-control" placeholder="请输入项目编号">
                                </div>
                                <div class="form-group">
                                    <label>项目名称</label>
                                    <input type="text" name="name" class="form-control" placeholder="请输入项目名称">
                                </div>
                                <!--                                <div class="form-group">-->
                                <!--                                    <label>设计科室</label>-->
                                <!--                                    <select type="text" id="designDepts" name="designDepts" class="form-control select">-->
                                <!--                                    </select>-->
                                <!--                                </div>-->
                                <!--                                <div class="form-group">-->
                                <!--                                    <label>生产状态</label>-->
                                <!--                                    <select name="proStatus" class="form-control">-->
                                <!--                                        <option value="">全部</option>-->
                                <!--                                        <option value="1" selected="selected">未完结</option>-->
                                <!--                                        <option value="4">完结</option>-->
                                <!--                                    </select>-->
                                <!--                                </div>-->
                                <div class="form-group">
                                    <label>设计任务状态</label>
                                    <select name="designPoint" class="form-control">
                                        <option value="" selected="selected">全部</option>
                                        <option value="0">未开始</option>
                                        <option value="1">执行中</option>
                                        <option value="2">已完成</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>生产状态</label>
                                    <select name="status" class="form-control">
                                        <option value="" selected="selected">全部</option>
                                        <option value="-1">无状态</option>
                                        <option value="1">未开始</option>
                                        <option value="2">执行中</option>
                                        <option value="3">已完成</option>
                                        <option value="4">取消</option>
                                        <option value="5">暂缓</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>是否有提报计划</label>
                                    <select name="havePlan" class="form-control">
                                        <option value="">全部</option>
                                        <option value="1" selected="selected">有</option>
                                        <option value="2">无</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>是否完成</label>
                                    <select name="isFinish" class="form-control">
                                        <option value="" selected="selected">全部</option>
                                        <option value="1">是</option>
                                        <option value="2">否</option>
                                    </select>
                                </div>
                                <button type="button" class="btn btn-success" id="btn-search">
                                    <span class="Bold">搜索</span>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="box-body">
                    <table id="bootstrap-table1"></table>
                </div>
            </div>
        </div>
    </div>
</section>
<div th:include="include :: footer"></div>
<script th:inline="javascript">

    var colors1 = ["","label-warning","label-default","label-danger",  "label-success", "label-danger"];
    var statusText = ["无状态", "执行中", "未开始", "暂缓", "已完成", "取消"];
    var colors2 = ["label-default", "label-success", "label-warning"];
    var state2 = ['未开始', '已完成', '执行中'];
    var colors = ["label-default", "label-warning", "label-success"];
    var table, state = ['无状态', '执行中', '未开始', '暂缓', '已完成', '取消'];
    var color = ['label-default', "label-warning", "label-info", "label-danger", "label-success"];
    var reportStatusOfMaterialControlDepartment = ['无状态', '正常提报', '暂不提报', '部分提报'];
    var reportStatusOfMaterialControlDepartmentColor = ['label-default', 'label-info', 'label-primary', 'label-warning'];
    $(function () {
        $("title").html($("title").html() + " —— 项目计划看板");
        /**
         * 加载列表
         */
        table = js.table.init({
            showColumns: false,
            id: "bootstrap-table1",
            url: ctx + "buy/planTraManage/list",
            showExport: false,
            smartDisplay: true,
            // pagination: false,
            pagination: true,                                   // 是否显示分页
            pageNumber: 1,                                      // 默认第一页
            pageSize: 50,                                       // 每页的记录行数
            pageList: [50, 100, 150, 200, 300],               // 可供选择的每页的行数
            columns: [
                {
                    title: '序号', field: 'id', width: '50px',
                    formatter: function (value, row, index, field) {
                        let pageSize = table.bootstrapTable('getOptions').pageSize;
                        let pageNumber = table.bootstrapTable('getOptions').pageNumber;
                        return pageSize * (pageNumber - 1) + index + 1;
                    }
                },
                {title: '项目编号', field: 'code', width: '40'},
                {title: '项目名称', field: 'name', width: '300'},
                {title: '数量', field: 'num', width: '40'},
                {
                    title: '设计<br>任务状态', field: 'sectionTaskStatus', width: '40',
                    formatter: function (value, row, index) {
                        if (row.projectClassify == 2) {
                            return '<span class="badge  label-primary">' + '不需要' + '</span> ';
                        }
                        if (value === 0) {
                            return '<span class="badge ' + colors[value] + '">' + '未开始' + '</span> ';
                        } else if (value === 1) {
                            return '<span class="badge ' + colors[value] + '">' + '执行中' + '</span> ';
                        } else if (value === 2) {
                            return '<span class="badge ' + colors[value] + '">' + '已完成' + '</span> ';
                        } else if (value === 3) {
                            return '<span class="badge ' + colors[value] + '">' + '已取消' + '</span> ';
                        }
                    }
                },
                {
                    title: '生产<br>任务状态', field: 'proProductionStatus', width: '40',
                    formatter: function (value, row, index) {
                        return '<span class="badge ' + colors1[value] + '">' + statusText[value] + '</span> ';
                    }
                },
                {title: '提报计划<br>总数', field: 'rppImportCount', width: '70'},
                {title: '正常提报<br>且采购计<br>划提交数', field: 'processAndSubmitThePurchasePlanCount', width: '70'},
                {title: '使用库存<br>并指定计<br>划数', field: 'confirmUseOfStockCount', width: '70'},
                {title: '暂不提报<br>计划数', field: 'noReportForTheTimeBeingCount', width: '70'},
                {
                    title: '计划<br>完成率', field: 'planUnfinishedRate', width: '70',
                    formatter: function (value, row, index) {
                        return value + '%';
                    }
                },
                {
                    title: '操作', width: '60px',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-info btn-xs" target="_blank" href="' + ctx + 'buy/planTraManage/proDetail/' + row.code + '"> 查看</a> ');
                        return actions.join('');
                    }
                }
            ]
        });

        /**
         * 表格搜索
         */
        $("#btn-search").click(function () {
            js.table.search(table);
        });
    });

    /**
     * 通过obj改变目标的val值
     * @param obj
     * @param target
     */
    function changeTargetVal(obj, target) {
        $("#" + target).val($(obj).val());
    }
</script>
</body>
</html>